<script>
    import { onMount } from "svelte";
    import { Indicator } from 'flowbite-svelte';
    import { Heading, P, Button, Span } from "flowbite-svelte";
    import { ArrowRightOutline } from "flowbite-svelte-icons";

    import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from 'flowbite-svelte';

    // 控制是否显示元素
    let isVisible = false;

    onMount(()=>{
        isVisible = true
    })
</script>

<svelte:head>
    <title>Home</title>
    <meta name="description" content="Svelte demo app" />
</svelte:head>
<section>
    <div class="blurbox relative  h-96 p-6" >
        <!--   -->
        <div class="fade-blur background absolute top-0 left-0 right-0 bottom-0" class:fade-blur-enter={isVisible} style="background-image: url(https://www.bungie.net/7/ca/destiny/bgs/c3BsYXNo/c3DsYXNo_01.jpg);"></div>
        <div class="container py-10 relative z-20">
            <div class="text-center container">
                <Heading tag="h1" class="mb-20" customSize="text-4xl font-extrabold  md:text-5xl lg:text-6xl">光影思维<Span gradient>2.0</Span></Heading>
                <P class="mb-6 text-lg lg:text-xl sm:px-16 xl:px-48 dark:text-gray-400 text-center">有了光影思维，你离艺术大师便更近了一步，素描零基础的你也能画出惟妙惟肖的物体来～</P>
                <Button href="/">
                    了解更多
                    <ArrowRightOutline class="w-6 h-6 ms-2" />
                </Button>
            </div>
        </div>
    </div>

    <div class=" container py-12 relative z-10">
        <h2 class=" text-center text-3xl py-12">
            多场景应用
        </h2>
        <div class=" grid grid-cols-2 gap-y-4 sm:grid-cols-4 sm:gap-y-0 gap-x-4">
            <div class=" bg-color1 p-4 rounded-lg flex flex-col">
                <img class="mx-auto w-12 h-12 rounded-xl" src="/images/kook.webp" alt="">
                <div class=" my-2 text-center">KOOK</div>
                <a class= "mx-auto rounded text-theme" target="_blank" href="https://kook.top/T5MGB5">加入群聊</a>
            </div>
            <div class=" bg-color1 p-4 rounded-lg flex flex-col">
                <img class="mx-auto w-12 h-12 rounded-xl" src="/images/qq.webp" alt="">
                <div class=" my-2 text-center">QQ</div>
                <a class= "mx-auto rounded text-theme" target="_blank" href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=wt493JvQvgoNxbFs4dt3z50Y0I29RSaI">加入群聊</a>
            </div>
            <div class=" bg-color1 p-4 rounded-lg flex flex-col">
                <img class="mx-auto w-12 h-12 rounded-xl" src="/images/heybox.png" alt="">
                <div class=" my-2 text-center">小黑盒</div>
                <a class= "mx-auto rounded text-theme" target="_blank" href="https://chat.xiaoheihe.cn/imvd9j29">加入群聊</a>
            </div>
            <div class=" bg-color1 p-4 rounded-lg flex flex-col">
                <img class="mx-auto w-12 h-12 rounded-xl" src="/favicon.png" alt="">
                <div class=" my-2 text-center">WEB</div>
                <a href="/" class= "mx-auto rounded text-theme" target="_blank">当前主站</a>
            </div>
            
        </div>
    </div>

    <div class=" container py-12">
        <h2 class=" text-center text-3xl py-12">
            功能指令
        </h2>
        

        <Table>
            <TableHead theadClass="!bg-color1">
                <TableHeadCell>指令</TableHeadCell>
                <TableHeadCell>指令别名</TableHeadCell>
                <TableHeadCell>功能说明</TableHeadCell>
                <TableHeadCell>完成</TableHeadCell>
              </TableHead>
            <TableBody>
              <TableBodyRow class="!bg-color3">
                <TableBodyCell>/红框</TableBodyCell>
                <TableBodyCell>锻造,模式</TableBodyCell>
                <TableBodyCell>查询绑定用户的锻造收集情况</TableBodyCell>
                <TableBodyCell><div class="flex items-center"><Indicator color="green" />已完成</div></TableBodyCell>
              </TableBodyRow>

              <TableBodyRow class="!bg-color3">
                <TableBodyCell>/配装</TableBodyCell>
                <TableBodyCell>当前配装,所有配装,全部配装,泰坦配装,猎人配装,术士配装</TableBodyCell>
                <TableBodyCell>查询用户的角色配装</TableBodyCell>
                <TableBodyCell><div class="flex items-center"><Indicator color="green" />已完成</div></TableBodyCell>
              </TableBodyRow>

              <TableBodyRow class="!bg-color3">
                <TableBodyCell>/枪械名</TableBodyCell>
                <TableBodyCell>所有枪械名</TableBodyCell>
                <TableBodyCell>查询枪械的perk和属性</TableBodyCell>
                <TableBodyCell><div class="flex items-center"><Indicator color="green" />已完成</div></TableBodyCell>
              </TableBodyRow>
            </TableBody>
          </Table>
    </div>
    
</section>

<style lang="less">
    .background {
        background-color: var(--color2);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
		background-attachment: fixed;
    }
    .blurbox{
        &:hover{
            .fade-blur{
                filter: blur(2px);
            }
        }
    }

    /* 自定义动画效果 */
    .fade-blur {
      transition: filter 0.5s ease-in-out;
      filter: blur(100px);
    }
    .fade-blur-enter {
      filter: blur(5px);
    }
  </style>
